import './index.scss'
import {Image, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter, useUnload} from '@tarojs/taro'
import {productFilesStore} from './model'
import {imagesUrl} from '@/utils/baseUrl'
import {CCard} from '@/components/card'
import {toSettingProductFileInfo} from '@/utils/pageRedirect'
import {VideoIconMask} from '@/pages-setting/components/mask'

const Productfiles: React.FC = (): JSX.Element => {
  let router = useRouter()
  const {
    updatePageQuery,
    pageQuery,
    updateFileList,
    fileList,
    clearPageData,
    returnTypeNameByTypeCode
  } = useContext(productFilesStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Productfiles useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Productfiles useDidShow')
    updatePageQuery(router.params)
    updateFileList()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Productfiles useDidHide')
  })
  useUnload(() => {
    clearPageData()
  })
  return (
    <View className="p-16 bg-xx_bg">
      <View className="pt-10 mb-26 h-74 flex">
        <Image
          src={imagesUrl + 'logo-simple.png'}
          className="w-74 h-74"
        ></Image>
        <View className="flex-1 pt-4">
          <View className="hanzi h-28 leading-28 text-20 text-medium mb-4 truncate">
            恒蓝云
          </View>
          <View className="hanzi text-14 text-x_text truncate">
            让我们的天更蓝，水更清
          </View>
        </View>
      </View>

      {fileList.map((item, idx) => (
        <CCard
          style={{
            padding: '24rpx',
            display: 'flex',
            marginBottom: '32rpx'
          }}
          onClick={() =>
            pageQuery.devId &&
            toSettingProductFileInfo(
              Object.assign(item, {devId: pageQuery.devId})
            )
          }
        >
          <View className="w-150 h-98 mr-16 bg-success rounded-6 overflow-hidden relative">
            {item.devTypePFTypeCode === '0046' ? (
              <VideoIconMask></VideoIconMask>
            ) : null}
            <Image
              src={imagesUrl + 'product.png'}
              className="w-full h-full"
            ></Image>
          </View>
          <View className="w-150 h-98 rounded-6 overflow-hidden flex flex-col">
            <View className="hanzi w-full mt-6 mb-2 text-16 font-bold truncate">
              {item.devTypePFName}
            </View>
            <View className="hanzi overflow-hidden leading-17 flex-1 box text-12 text-xx_text">
              {returnTypeNameByTypeCode(item.devTypePFTypeCode)}
            </View>
            <View className="hanzi w-full mt-2 text-12 text-right text-xxx_text truncate">
              {item.createTime || ''}
            </View>
          </View>
        </CCard>
      ))}
    </View>
  )
}
export default observer(Productfiles)
